<template>
  <div>
    <div
      v-show="showChart"
      :id="'containerColumn_'+idIndex"
    ></div>
    <div
      class="rowFlex allCenter"
      :style="{justifyContent: 'center', height: !showChart ? '200px' : '1px',width: '100%'}"
    >
      <h1 v-if="!showChart">暂无数据</h1>
    </div>
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot'
import { numberFormatThousandthPercentile, numFormat } from '@/utils/index'
import { max, min } from 'moment'
export default {
  props: ['chartData', 'idIndex'],
  data() {
    return {
      lineChart: null,
      showChart: true
    }
  },
  watch: {
    chartData(newVal, oldVal) {
      if (newVal.length > 0) {
        this.showChart = true
        if (this.lineChart) {
          const new_data = newVal.map((item) => {
            return { ...item, label: item.title + `${item.app_type ? '(' + (item.app_type == 1 ? '微信' : '抖音') + ')' : ''}` + `${item.playlet_id ? '(' + item.playlet_id + ')' : ' '}`, percent: Number(item.num), value: Number(item.member_num) }
          })
          this.lineChart.changeData([new_data, new_data])
        } else {
          this.initChart()
        }
      } else {
        this.showChart = false
      }
    }
  },
  mounted() {
    // this.chartResize()
  },
  methods: {
    formatNumber(data) {
      return numberFormatThousandthPercentile(data)
    },
    formatNumber1(data) {
      return numFormat(data + '')
    },
    initChart() {
      const data = this.chartData.map((item) => {
        return { label: item.title + `${item.app_type ? '(' + (item.app_type == 1 ? '微信' : '抖音') + ')' : ''}` + `${item.playlet_id ? '(' + item.playlet_id + ')' : ''}`, percent: Number(item.num), value: Number(item.member_num) }
      })

      if (this.lineChart) {
        this.lineChart.destroy()
        this.lineChart = null
      }
      const charts = new DualAxes('containerColumn_' + this.idIndex, {
        data: [data, data],
        xField: 'label',
        yField: ['percent', 'value'],
        height: 280,
        // width: 600,
        autoFit: true,
        padding: [10, 20, 60, 20], // 需要设置底部 padding 值，同 css
        appendPadding: [10, 20, -90, 20], // 需要设置底部 padding 值，同 css
        legend: {
          position: 'top'
        },
        xAxis: {
          label: {
            // formatter(text, item) {
            //   console.log(text, item)
            //   const textarr = []
            //   textarr.push(text)
            //   return textarr
            // },
            style: {
              fontSize: 10
            }
            // formatter: () => {}
            // autoRotate: true,
            // autoHide: false
            // autoEllipsis: true
          }
        },
        yAxis: {
          value: {
            min: 0,
            tickCount: 3
          },
          percent: {
            min: 0,
            tickCount: 3
          }
        },
        meta: {
          label: {
            sync: false // 开启之后 slider 无法重绘
          },
          value: {
            alias: '投诉人数',
            formatter: (v) => {
              if (this.idIndex === 'five') {
                return this.formatNumber(v)
              } else {
                return this.formatNumber1(v + '')
              }
            }
          },
          percent: {
            alias: '投诉条数',
            formatter: (v) => {
              if (this.idIndex === 'five') {
                return this.formatNumber1(v + '') + '%'
              } else {
                return this.formatNumber(v)
              }
            }
          }
        },
        geometryOptions: [
          {
            geometry: 'column'
            // seriesField: 'name',
          },
          {
            geometry: 'line'
            // seriesField: 'name',
          }
        ]
      })
      charts.render()
      this.lineChart = charts
    }
  }
}
</script>
<style lang="scss" scoped>
</style>